<template>
  <div class="com-container">
    <div class="com-chart" id="rank"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      allData: null,
      chartsId: null,
      startValue: 0,
      endValue: 9,
      timerId: null
    }
  },
  methods: {
    initCharts () {
      this.chartsId = this.$echarts.init(
        document.getElementById('rank'),
        this.theme
      )
      const initOption = {
        tooltip: {
          shwo: true
        },
        title: {
          text: '▎ 地区销售排行',
          left: 10,
          top: 10
        },
        xAxis: {
          type: 'category'
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff'
              }
            },
            itemStyle: {
              barBorderRadius: [33, 33, 0, 0],
              // 添加颜色渐变
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#5052EE' },
                { offset: 1, color: '#AB6EE5' }
              ])
            }
          }
        ]
      }
      this.chartsId.setOption(initOption)
      this.chartsId.on('mouseover', () => {
        clearInterval(this.timerId)
      })
      this.chartsId.on('mouseout', () => {
        this.setIntervalTimer()
      })
    },
    async getData () {
      const { data: res } = await this.$http.get('rank')
      res.sort((a, b) => {
        return b.value - a.value
      })
      this.allData = res
      this.updatedCharts()
      this.setIntervalTimer() // 获取数据后立即执行定时器函数
    },
    updatedCharts () {
      const names = this.allData.map((item) => {
        return item.name
      })
      const values = this.allData.map((item) => {
        return item.value
      })
      const colorArr = [
        ['#0BA82C', '#4FF778'],
        ['#2E72BF', '#23E5E5'],
        ['#5052EE', '#AB6EE5']
      ]
      const initOption = {
        xAxis: {
          data: names
        },
        dataZoom: {
          show: false,
          startValue: this.startValue,
          endValue: this.endValue
        },
        series: {
          data: values,
          itemStyle: {
            color: (arg) => {
              let targetColorArr = colorArr[0]
              if (arg.vaule >= 300) {
                targetColorArr = colorArr[0]
              } else if (arg.value >= 200) {
                targetColorArr = colorArr[1]
              } else {
                targetColorArr = colorArr[2]
              }
              return new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: targetColorArr[0] },
                { offset: 1, color: targetColorArr[1] }
              ])
            }
          }
        }
      }
      this.chartsId.setOption(initOption)
    },
    screenAdapter () {
      const titleFontSize =
        (document.getElementById('rank').offsetWidth / 100) * 2.6
      const initOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          },
          series: [
            {
              barWidth: titleFontSize,
              itemStyle: {
                barBorderRadius: [
                  0.5 * titleFontSize,
                  0.5 * titleFontSize,
                  0,
                  0
                ]
              }
            }
          ]
        }
      }
      this.chartsId.setOption(initOption)
      this.chartsId.resize()
    },
    // 定时器函数
    setIntervalTimer () {
      if (this.timerId) {
        clearInterval(this.timerId)
      }
      this.timerId = setInterval(() => {
        this.startValue++
        this.endValue++
        if (this.endValue > this.allData.length - 1) {
          this.startValue = 0
          this.endValue = 9
        }
        // 更新完再执行一次
        this.updatedCharts()
      }, 3000)
    }
  },
  mounted () {
    this.initCharts()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destroyed () {
    window.removeEventListener('resize', this.screenAdapter)
    clearInterval(this.timerId)
  },
  computed: {
    ...mapState(['theme'])
  },
  watch: {
    // 监听主题的变化  主题变化后更新图表
    theme () {
      this.chartsId.dispose() // 重新渲染组件
      this.initCharts()
      this.screenAdapter()
      this.updatedCharts()
    }
  }
}
</script>

<style>
</style>
